// 添加类型的 - 弹出层上的 表单标签
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="submit" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;


// 渲染功能
function lode() {
  axios({
    method: 'get',
    url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
    headers: {
      'Authorization': localStorage.getItem('token'),

    }

  }).then((res) => {
    // console.log(res)
    if (res.data.status === 0) {
      $('tbody').empty()
      res.data.data.forEach((obj, index) => {
        const theTr = `<tr>
                        <td>${obj.name}</td>
                        <td>${obj.alias}</td>
                        <td>
                          <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
                    
                          <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                        </td>
                      </tr> `
        $('tbody').append(theTr)
      });
    }
  })

}

lode()

// 验证条件
const form = layui.form;

form.verify({
  ctname: [
    /^[\u4E00-\u9FA5]+$/,
    "分类名只能是中文"
  ],
  // aliname: [
  //   /^[a-z0-9]+$/,
  //   "小写英文和数字组成"
  // ]
})

// 删除数据  动态的数据  
// 要用事件委托
$('tbody').on('click', '.delete', function () {

  const that = this

  let id = $(this).attr('myid')

  let index = layer.confirm('确定删除！！', {
      icon: 3,
      title: '温馨提醒'
    },
    // 找到自定义属性中的myid
    function () {
      axios({
        method: 'get',
        url: `http://api-breakingnews-web.itheima.net/my/article/deletecate/${id}`,
        headers: {
          'Authorization': localStorage.getItem('token'),

        }
      }).then(function (res) {
        // console.log(res)
        if (res.data.status === 0) {

          layer.msg(res.data.message)
          //第一个方式:重新渲染页面

          // 让当前这一行自爆
          $(that).parents('tr').remove()

          // lode()
          layer.close(index)
        }

      })
    }
  )
})





// 编辑模式
$('tbody').on('click', '.edit', function () {
  const Id = $(this).attr('myid')
  const name = $(this).data('name')
  const alias = $(this).data('alias')

  const index = layer.open({
    type: 1,
    title: '编辑类别',
    area: ['500px', '300px'],
    content: edit_str,
    success() {

      // layui框架进行取值
      let form = layui.form;
      form.val("edit", { // 传入一个对象, key和上面的变量名重名了
        Id: Id,
        name,
        alias
      })

      $('.add-form').on('submit', function (e) {

        e.preventDefault()

        // 收集数据发给后台
        let data = $(this).serialize();

        axios({
          method: 'post',
          url: 'http://api-breakingnews-web.itheima.net/my/article/updatecate',
          data,
          headers: {
            'Authorization': localStorage.getItem('token'),
          }
        }).then((res) => {
          // console.log(res)
          if (res.data.status === 0) {
            layer.msg(res.data.message)
            lode()
            layer.close(index)
          }
        })

      })
    }
  })
})


// 添加数据
// 点击添加触发点击添加事件
$('.add').on('click', function () {
  const index = layer.open({
    type: 1,
    title: '添加类别',
    area: ['500px', '300px'],
    content: add_str,

    // 弹窗成功后的回调
    success() {
      $('form').on('submit', function (e) {

        e.preventDefault()

        axios({
          method: 'post',
          url: 'http://api-breakingnews-web.itheima.net/my/article/addcates',
          data: $(this).serialize(),
          headers: {
            'Authorization': localStorage.getItem('token'),
          }
        }).then(res => {
          console.log(res)
          if (res.data.status === 0) {

            layer.msg(res.data.message)
            // 重新渲染页面
            lode()
            // 关闭弹窗
            layer.close(index)
          } else {
            layer.msg(res.data.message)
          }
        })

      })
    }
  })
})

// 编辑弹窗的内容
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;